<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> {{ route.query.studentId }}未领取物资
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-form>
          <el-form-item>
            <el-button
                type="primary"
                @click="handleAdd()"
                v-if="roleId!=1"
            >发送通知
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
          :data="tableReceiveData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
      >
        <el-table-column label="序号" type="index" :index="indexMethod"/>
        <el-table-column
            :show-overflow-tooltip="true"
            :prop="item.prop"
            :label="item.label"
            v-for="item in propt"
            :key="item.prop"
            align="center"
        >
        </el-table-column>
        <el-table-column label="物品样例" align="center">
          <template #default="scope">
            <p v-if="scope.row.goodsUrl!=null">
                       <span v-for="(item,index) in scope.row.goodsUrl.split(',')" :key="index">
                     <el-image style="display: inline-flex;padding: 10px;width: 30%;height: 10%"
                               class="table-td-thumb"
                               :src="item"
                               :preview-src-list="[item]"
                     ></el-image>
              </span>
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="信息通告" v-model="dialogVisible" width="50%">
        <el-form :model="bulletin" label-width="100px">
          <el-form-item label="通告标题">
            <el-input v-model="bulletin.title" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="通告优先级">
            <el-radio v-model="bulletin.level" label="3" border> 一级</el-radio>
            <el-radio v-model="bulletin.level" label="2" border>二级</el-radio>
            <el-radio v-model="bulletin.level" label="1" border>三级</el-radio>
          </el-form-item>
          <el-form-item label="通告内容">
            <div id="div1"></div>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>

</template>

<script setup>
import request from "../../utils/request";
import {ElMessage} from "element-plus";
import {nextTick, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import E from "wangeditor";

const router = useRouter();
const route = useRoute();
const store = useStore();
const tableReceiveData = ref([]);
const propt = [
  {label: "物品名称", prop: "goodsName"},
  {label: "物品类型", prop: "goodsType"},
];
const tableSelection = reactive({
  studentIds: [],
  bulletin: {},
});
const roleId = ref("");
roleId.value=localStorage.getItem("ms_role")
const studentId = ref("");
if (route.query.studentId) {

  studentId.value = route.query.studentId
  tableSelection.studentIds = [];
  tableSelection.studentIds.push(studentId.value);

  //获取表格数据
  // 表单校验
  request.get("/goods/queryGoods/" + route.query.studentId)
      .then((res) => {
        if (res.data.length == 0) {
          ElMessage.info("该学生以已经物品已经全部申领");
        }
        tableReceiveData.value = res.data;
      });
}
const indexMethod = (index, number) => {
  return (index + 1)
};
// 新增操作
let editor
const bulletin = ref({
  content: "",
  title: "",
  level: "",
})
const dialogVisible = ref(false);
const handleAdd = () => {
  dialogVisible.value = true
  bulletin.value = {}
  nextTick(() => {
    // 关联弹窗里面的div，new一个 editor对象
    if (!editor) {
      editor = new E('#div1')
      // 配置 server 接口地址
      editor.config.uploadImgServer = 'http://localhost:9998/files/editor/upload'
      editor.config.uploadFileName = "file"  // 设置上传参数名称
      editor.create()
    }
    editor.txt.html("")

  })
};

const save = () => {
  tableSelection.studentIds = [];
  tableSelection.studentIds.push(studentId.value);
  bulletin.value.content = editor.txt.html()
  // console.log(bulletin.value)
  tableSelection.bulletin = bulletin
  if (tableSelection.studentIds.length !== 1) {
    ElMessage.error("请选择正确学生");
    return;
  }
  if (bulletin.value.sid) {  // 更新
    request.put("/bulletin", tableSelection).then(res => {
      console.log(res)
      if (res.code === null) {
        ElMessage.success("更新成功")
      } else {
        ElMessage.error(res.msg)
      }
      // 刷新表格的数据
      dialogVisible.value = false  // 关闭弹窗
    })
  } else {  // 新增
    request.post("/bulletin/saveBatchBulletin", tableSelection).then(res => {
      if (res.code === null) {
        ElMessage.success("新增成功")
      } else {
        ElMessage.error(res.msg)
      }
      // 刷新表格的数据
      dialogVisible.value = false  // 关闭弹窗
    })
  }
}
</script>

<style scoped>
.clist {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>